<template>
  <div>
    <div class="head">
      <p class="text">编辑资料</p>
      <van-icon
        @click="onClickLeft()"
        class="arrow"
        size="20"
        color="whitesmoke"
        name="arrow-left"
      />
    </div>
    <div>
        <p class="p1">修改用户名</p>
        <p class="p2">您当前用户名为：{{username}}</p>
        <el-input v-model="input" placeholder="请输入新用户名"></el-input>
        <!-- <p class="p3">用户名可以修改，用户名一年只可修改一次，请慎重修改</p> -->
        <van-button class="btn1" type="primary" @click="changeUsename()">确认修改</van-button>
    </div>
    <!-- <div class="inform">
        <ul>
            <li>
               用户名一年只可修改一次，请慎重修改 
            </li>
            <li>不能以数字开头</li>
            <li>用户名需大于5位小于15位</li>
            <li>禁止包含非法字符及违禁关键词</li>
        </ul>
    </div> -->
  </div>
</template>
<script>
import http from '../api/index';

export default {
    data() {
        return {
           input:'' ,
            username:sessionStorage.getItem('username'),
             id: sessionStorage.getItem('roleId'),
        }
    },
    methods: {
        onClickLeft(){
            this.$router.push('/change');
        },
        changeUsename(){
          http.changeMsg({
            user_id:sessionStorage.getItem('roleId'),
            user_name:this.input
          }).then(r => {
            console.log(r);
            alert('修改成功！');
          })
          sessionStorage.setItem('username',this.input)
        }
    },
}
</script>
<style scoped>
.head {
  width: 100%;
  height: 4rem;
  background-color: rgb(108, 144, 243);
}
.text {
  text-align: center;
  font-size: 1.6rem;
  color: whitesmoke;
  line-height: 4rem;
}
.arrow {
  position: absolute;
  top: 1.1rem;
}
.btn1{
    position: relative;
    top: 2.6rem;
    left: 0.6rem;
    width: 97%;
}
.p1{
  text-align: center;
  font-size: 2.4rem;
  margin-top: 1rem;
}
.p2{
  text-align: center;
  font-size: 1.4rem;
  color: rgb(100, 98, 98);
  margin-top: 1rem;

}
.p3{
  margin-left: 1rem;
  color: #07C160;
  margin-top: 1rem;
}
.inform{
  margin-left:1rem;
  margin-top: 4rem;
  color: rgb(116, 115, 117);
}
</style>